<template>
    <div>
        <el-form :model="data.dynamicDetail" :rules="rules" ref="examineRef" style="margin: 0 auto;width: 1000px">
            <el-form-item label="内容" label-width="130px">
                <el-input :autosize="{ minRows: 10, maxRows: 10 }" v-model="data.dynamicDetail.content"
                          autocomplete="off" type="textarea"/>
            </el-form-item>
            <el-form-item label="发布人" label-width="130px">
                <el-input v-model="data.dynamicDetail.publishUserNickName" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="发布学校" label-width="130px">
                <el-input v-model="data.dynamicDetail.publishSchoolName" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="动态类型" label-width="130px">
                <el-tag
                    type="info"
                    disable-transitions
                    v-if="data.dynamicDetail.type === 1"
                >悄悄话
                </el-tag>
                <el-tag
                    type="info"
                    disable-transitions
                    v-if="data.dynamicDetail.type === 2"
                >提问
                </el-tag>
            </el-form-item>
            <el-form-item label="是否开启评论" label-width="130px">
                <el-tag
                    type="success"
                    disable-transitions
                    v-if="data.dynamicDetail.isOpenComment"
                >开启
                </el-tag>
                <el-tag
                    type="danger"
                    disable-transitions
                    v-if="!data.dynamicDetail.isOpenComment"
                >关闭
                </el-tag>
            </el-form-item>
            <el-form-item label="动态图片" label-width="130px">
                <div class="demo-image" v-for="image in data.dynamicDetail.images" :key="image">
                    <el-image style="width: 100px; height: 100px" :src="image" fit="fit"
                              :preview-src-list="data.dynamicDetail.images"/>
                </div>
            </el-form-item>
            <el-form-item label="审核状态" label-width="130px" prop="examineStatus">
                <el-select v-model="data.dynamicDetail.examineStatus" class="m-2" placeholder="请选择审核状态"
                           size="large"
                           @change="selectExamineStatus">
                    <el-option
                        v-for="item in examineStatus"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="未通过原因" label-width="130px" prop="noPassReason" v-if="data.noPassReasonDisable">
                <el-input v-model="data.dynamicDetail.noPassReason" autocomplete="off" type="textarea"/>
            </el-form-item>
            <el-form-item label-width="130px">
                <el-button @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import {reactive, onMounted, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {ElMessage} from "element-plus";
import {detail,pass,noPass} from "@/api/dynamic/dynamic";

export default {
    setup() {
        const data = reactive({
            dynamicDetail: '',
            noPassReasonDisable: false
        })
        const route = useRoute();
        const router = useRouter();
        const examineStatus = [
            {
                "value": 1,
                "label": "通过"
            },
            {
                "value": 2,
                "label": "不通过"
            }
        ]
        const examineRo = reactive({
            noPassReason: '',
            uuid: ''
        })
        const rules = reactive({
            examineStatus: [
                {
                    required: true,
                    message: "请选择审核状态",
                    trigger: "blur",
                },
            ],
            noPassReason: [
                {
                    required: true,
                    message: "请输入未通过原因",
                    trigger: "blur",
                },
            ]
        })
        const examineRef = ref(null);
        /**
         * 动态详情
         * @param uuid
         */
        const dynamicDetail = () => {
            detail(route.query.uuid).then(res => {
                data.dynamicDetail = res.data
                data.dynamicDetail.examineStatus = ''
                data.dynamicDetail.noPassReason = ''
            })
        }
        /**
         * 提交
         */
        const submit = async () => {
            examineRef.value.validate((valid) => {
                if (!valid) {
                    return false;
                }
                examineRo.noPassReason = data.dynamicDetail.noPassReason
                examineRo.uuid = data.dynamicDetail.uuid
                // 审核通过
                if (data.dynamicDetail.examineStatus === 1) {
                    pass(examineRo).then(() => {
                        ElMessage({
                            message: '审核成功',
                            type: 'success',
                        })
                    })
                }
                // 不通过
                if (data.dynamicDetail.examineStatus === 2) {
                    noPass(examineRo).then(() => {
                        ElMessage({
                            message: '审核成功',
                            type: 'success',
                        })
                    })
                }
                setTimeout(function () {
                    router.push("/treeHole/dynamic")
                }, 1000)
            })
        }
        /**
         * 选中审核状态
         */
        const selectExamineStatus = (val) => {
            data.dynamicDetail.examineStatus = val
            if (val === 1) {
                data.noPassReasonDisable = false
            }
            if (val === 2) {
                data.noPassReasonDisable = true
            }
        }
        onMounted(() => {
            dynamicDetail()
        })
        return {
            data,
            examineStatus,
            rules,
            examineRef,
            submit,
            selectExamineStatus
        }
    }
}
</script>